/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header title="学习答疑">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <Search :auto-fixed="false" v-model="keyWords"></Search>
      <div ref="mescroll" class="mescroll">
        <ul id="dataList">
          <li v-for="(item,index) in list" :key="index" @click="goDetail(item)">
            <img :src="require('../../assets/img/footerbar/ask.png')" :alt="item.title">
            <p>{{item.title}}</p>
            <i class="iconfont icon-previewright"></i>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
import _ from "lodash";
import Header from "../../components/Header/Header";
import { Search } from "vux";
import MeScroll from "mescroll.js";
import moment from "moment";
import { reqAskList } from "../../api/index.js";
export default {
  data() {
    return {
      mescroll: null,
      list: null,
      keyWords: null
    };
  },
  mounted() {
    self = this;
    self.mescroll = new MeScroll(self.$refs.mescroll, {
      down: {
        auto: true,
        callback: self.downCallback,
        textInOffset: "下拉刷新",
        textOutOffset: "松开立即刷新",
        textLoading: `<p>正在加载数据中...</p><p>最后更新: 今天${moment().format(
          "HH:mm"
        )}</p>`
      }
    });
  },
  watch: {
    keyWords: _.debounce(function(data) {
      this.mescroll.triggerDownScroll();
    }, 500)
  },
  methods: {
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    // 下拉刷新
    async downCallback(mescroll) {
      const result = await reqAskList({
        keyWords: this.keyWords
      });
      if (result.code === 1) {
        this.list = result.data.items;
        this.$nextTick(() => {
          mescroll.endSuccess(result.data.total);
        });
      } else {
        this.$vux.toast.show(`获取免费列表失败:${result.msg}`);
        this.$nextTick(() => {
          mescroll.endErr();
        });
      }
    },
    goDetail(data) {
      this.$router.push({ path: "/consultDetail", query: { id: data.id } });
    }
  },
  components: {
    Header,
    Search
  }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";
.content {
  .be-full();
  .main {
    width: 100%;
    height: calc(~"100% - 46px");
    position: relative;
    .mescroll {
      width: 100%;
      height: calc(~"100% - 44px");
      li {
        .mix-flex-center();
        border: 1px solid @border-base;
        background: @white;
        height: 50px;
        img {
          flex: 0 0 32px;
          height: 32px;
          padding: 0 6px;
          box-sizing: border-box;
        }
        p {
          flex: 1;
          .mix-text-overflow();
        }
        i {
          flex: 0 0 30px;
        }
      }
    }
  }
}
</style>
